<template>
  <div class="main_ask">
    <div class="main_ask_title">
      <div class="main_ask_title_1">我的提问({{ problemList.length }})</div>
    </div>
    <div class="main_ask_for">
      <a-spin :spinning="spinning" :tip="'加载中'" :delay="100">
        <div v-for="(item,index) in problemList" :key="item.id">
          <div class="main_ask_for_item">
            <router-link :to="{
            path: '/problemDetails',
            query: {
              id:item.id
            }
          }">
              <div class="main_ask_for_item_title">{{ item.title }}</div>
            </router-link>
            <div class="main_ask_for_item_statistics">
              <div class="main_ask_for_item_statistics_item">
                发布于&nbsp;{{ item.createTime }}
              </div>
              <div class="main_ask_for_item_statistics_item">
                {{ item.views }}&nbsp;阅读
              </div>
              <div class="main_ask_for_item_statistics_item">
                {{ item.likeCount }}&nbsp;点赞
              </div>
              <div class="main_ask_for_item_statistics_item">
                {{ item.reply }}&nbsp;回复
              </div>
              <a-button v-if="item.solve==='1'"
                        class="main_ask_for_item_statistics_button" type="primary">已解决
              </a-button>
              <a-button @click="handleIsSolveProblem(item.id,index)" v-else class="main_ask_for_item_statistics_button"
                        type="primary" danger>未解决
              </a-button>
            </div>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, createVNode} from "vue";
import {Answer} from "@/model/home/answer";
// @ts-ignore
import cookie from 'js-cookie'
import {getProblemListByUserId, isSolveProblem} from "@/api/personalCenter/myAsk";
import {Modal} from 'ant-design-vue';
import {FireTwoTone} from '@ant-design/icons-vue';

//是否显示加载中
const spinning = ref<boolean>(true);

//问题列表
const problemList = ref<Answer[]>([])

//用户id
const userId = ref<number>(0)

//上传问题的用户是否解决问题
const handleIsSolveProblem = (problemId: number, index: number) => {
  Modal.confirm({
    title: '你确定解决了问题吗?',
    icon: createVNode(FireTwoTone),
    okText: '确认',
    cancelText: '取消',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
        isSolveProblem(userId.value, problemId).then(() => {
          problemList.value[index].solve = problemList.value[index].solve === '1' ? '0' : '1'
        })
      }).catch(() => console.log('Oops errors!'));
    },
    onCancel() {
    },
  });
}

//获取当前用户发表的问题
const handleProblemListByUserId = async () => {
  const res = await getProblemListByUserId(userId.value)
  problemList.value = res.data.data.list
  setTimeout(() => {
    spinning.value = false
  }, 1000)
}

//从cookie中获取用户信息
const getUserinfo = () => {
  userId.value = JSON.parse(cookie.get('userinfo')).id
}

getUserinfo()
handleProblemListByUserId()
</script>

<style lang="less" scoped>
.main_ask {
  overflow: scroll;
  height: 94vh;

  .main_ask_title {
    width: 220px;
    margin: auto;

    .main_ask_title_1 {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      border-radius: 25px;
      background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
    }
  }

  .main_ask_for {
    background-color: white;
    border-radius: 50px;
    padding-bottom: 20px;
    margin: 15px 10% 20px;

    .main_ask_for_item {
      margin-left: 30px;
      margin-right: 30px;
      padding: 10px;
      border-bottom: 1px solid #f0f0f0;

      .main_ask_for_item_title {
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .main_ask_for_item_title:hover {
        color: red;
      }

      .main_ask_for_item_statistics {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;

        .main_ask_for_item_statistics_item {
          margin-right: 50px;
        }

        .main_ask_for_item_statistics_button {
          margin-left: auto;
        }
      }
    }
  }
}
</style>